const { default: styled } = require("styled-components");

const SongListWarrper = styled.ul`
  .songItem:hover .icons {
    display: flex;
  }
  li {
    color: var(--themeFontColor);
    display: flex;
    min-width: 0;
    div{
      margin-right: 5px;
    }
    &:first-child {
      color: rgb(136, 136, 136);
    }
    &:nth-child(n + 2) {
      padding: 10px 0;
      box-sizing: border-box;
      display: flex;
    }
    &:nth-child(n + 2):hover {
      background-color: var(--themeColorv2);
    }
    &:nth-child(n + 2):hover .ic {
      display: block;
    }
    &:nth-child(n + 2):hover .heart {
      color: red;
    }

    div {
      flex: 2;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      align-items: center;
      .icons {
        margin-right: 10px;
        align-self: flex-end;
        color: rgb(144, 144, 145);
        display: flex;
        justify-content: flex-end;
        font-size: 20px;
        .ic {
          display: none;
          margin-right: 10px;
          cursor: pointer;
          &:hover {
            color: rgb(31, 209, 165);
          }
        }
      }
      &:nth-child(1) {
        flex: 4;
        padding-left: 10px;
        .heart {
          color: rgb(144, 144, 145);
          margin-right: 5px;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
      &:last-child {
        flex: 1;
      }
    }
    .header-part {
      display: flex !important;
      box-sizing: border-box;
      .info {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 0 0 auto;
      }
      .btns {
        flex: 0 0 auto;
        .mv {
          color: rgb(255, 37, 26);
          font-size: 20px;
          margin-left: 5px;
          &:hover {
            color: rgb(222, 19, 14);
          }
        }
      }
      .icons {
      }
    }
  }
  .zj {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 0;
    box-sizing: border-box;
    cursor: pointer;
    
    &:hover{
      color: rgb(31, 209, 165);
    }
  }
`;

export default SongListWarrper;
